<!doctype html>

<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Bar mode</title>

	<script src='dhtmlxscheduler.js' type="text/javascript" charset="utf-8"></script>
	<script src='codebase/ext/dhtmlxscheduler_timeline.js' type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="codebase/locale/locale_cn.js"></script>

	<link rel='stylesheet' type='text/css' href='dhtmlxscheduler_flat.css'>
	

	<style type="text/css">
		html,
		body {
			margin: 0;
			padding: 0;
			height: 100%;
			overflow: hidden;
		}
	</style>

	<script type="text/javascript" charset="utf-8">
		var eventId = "";

		function init() {

			scheduler.locale.labels.timeline_tab = "会议预约";

			scheduler.config.xml_date = "%Y-%m-%d %H:%i";
			scheduler.config.drag_highlight = true;
			scheduler.config.mark_now = true;
			scheduler.config.multisection = false;
			scheduler.config.time_step = 30;
			scheduler.config.drag_resize = false;
			scheduler.config.drag_move = false;

			//===============
			//Configuration
			//===============
			var sections = [{
					key: 1,
					label: "会议室1"
				},
				{
					key: 2,
					label: "会议室2"
				},
				{
					key: 3,
					label: "会议室3"
				},
				{
					key: 4,
					label: "会议室4"
				}
			];

			scheduler.createTimelineView({
				name: "timeline",
				x_unit: "minute",
				x_date: "%H:%i",

				x_step: 30,
				x_size: 28,
				x_start: 16,
				x_length: 64,
				y_unit: sections,
				y_property: "section_id",
				render: "bar"
			});

			scheduler.init('scheduler_here', new Date(), "timeline");

			scheduler.attachEvent("onBeforeLightbox", function(id, mode, e) {
				//any custom logic here
				if(eventId != '') {
					scheduler.deleteEvent(eventId);
				}
				var dragged_event = scheduler.getEvent(id);
				eventId = id;

				var roomId = dragged_event.section_id;
				var startTime = dragged_event.start_date;
				var endTime = dragged_event.end_date;

				var convert = scheduler.date.date_to_str("%Y-%m-%d %H:%i");
				var roomName = "";
				for(var i = 0; i < sections.length; i++) {
					if(sections[i].key == roomId) {
						roomName = sections[i].label;
					}
				}
				console.log(roomName+">>"+startTime+">>>"+endTime)
				return false;
			});
			scheduler.parse([{
				start_date: "2018-02-01 09:00",
				end_date: "2018-02-01 12:00",
				text: "预约01",
				section_id: 1
			}, ], "json");
		}
	</script>
</head>

<body onload="init();">
	<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
		<div class="dhx_cal_navline">
			<div class="dhx_cal_date"></div>



		</div>
		<div class="dhx_cal_header">
		</div>
		<div class="dhx_cal_data">
		</div>
	</div>
</body>